<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.value" :class="{'checked': todo.done}">
        <label>{{index}}-{{todo.value}}</label>
        <time>{{ todo.created | date }}</time>
      </li>
    </ul>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
export default {
  name: "Params",
  data() {
    return {
      title: "title",
      todos: [
        {
          value: "Learn Tensorflow",
          done: false,
          created: Date.now() + 300000
        },
        {
          value: "Try Flutter",
          done: false,
          created: Date.now() + 300000
        },
        {
          value: "Make Things",
          done: true,
          created: Date.now() + 300000
        }
      ]
    };
  },
  filters: {
    date(val) {
       return moment(val).calendar()
    }
  }
};
</script>


<style>
</style>
